<template>
	<div class="countryReport accQuery">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/游戏分析/实时数据/</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>开始日期：</span>
					<el-date-picker 
			                size="small"
			                v-model="startdate"
			                type="date"
			                placeholder="选择日期" @change='startDateChange'></el-date-picker>
					<span>结束日期：</span>
					<el-date-picker 
			                size="small"
			                v-model="enddate"
			                type="date"
			                placeholder="选择日期" @change='endDateChange'></el-date-picker>
				</div>
			</div>
			<div class="choose_plat">
				<el-menu :theme="this.$store.getters.theme[4]"  class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="4" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>服务器筛选</el-menu-item>
				</el-menu>
			</div>
		</div>
		<div class="right_content">
			<div class="realTimeServiceTable">
				<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">总体数据</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i> 导出excel
					</el-button>
				</div>
				<div class="realTimeServiceTableBody">
					<template>
					  <el-table
					  	v-loading="loading"
    					element-loading-text="拼命加载中！"
					    :data="tableData"
					    border
					    :style="{width:realTimeServiceTableWidth}"
						@sort-change='sortChange'
					    >
					    <el-table-column sortable align="center"
					        v-for="col in tableHeader"  :key= "col.width" :width="col.width"
					        :prop="col.prop" :label="col.label" :fixed="col.fixed">
					    </el-table-column>
					  </el-table>
					</template>
				</div>
				<div class="block realTimeServicePage">
					<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataTotal"></el-pagination>
				</div>
			</div>
		</div>
		<!--  v-show="filterShow" -->
	    <v-advance ref="advance" :servers="servers" @get="getData" :post-obj='postObj'></v-advance>
	    <a href="" :download="xlsx" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./countryReport.styl"></style>
<script src="./countryReport.js"></script>